<template>
  <div class="app-container boss">
    <SearchHeader
      :searchForm="searchForm"
      :searchFormLeftList="searchFormLeftList"
      :buttonList="buttonList"
    >
    </SearchHeader>
    <div class="table-style">
      <Table :data="applicantData" :page="applicantDataDefaultData.page">
        <el-table-column
          :label="item.label"
          align="center"
          :prop="item.prop"
          v-for="(item, index) in applicantDataDefaultData.labelList"
          :key="index"
          :height="500"
        />

        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="openEdit(scope.row)"
              >编辑</el-button
            >

            <el-popconfirm title="您真的要删除吗" @confirm="proDel(scope.row)">
              <template #reference>
                <el-button link type="primary" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </Table>
    </div>
  </div>

  <!-- //新增 -->
  <el-dialog v-model="addVisivle" title="详情" :close-on-click-modal="false">
    <el-form :model="addForm" label-width="100px">
      <el-form-item label="姓名" prop="cmuCode">
        <el-input v-model="addForm.name" class="input-style" />
      </el-form-item>
      <el-form-item label="邮箱" prop="cmuCode">
        <el-input v-model="addForm.mail" class="input-style" />
      </el-form-item>
      <div class="button-style2">
        <el-button type="primary" @click="addCancel">取消</el-button>
        <el-button type="primary" @click="addSummit">提交</el-button>
      </div>
    </el-form>
  </el-dialog>

  <!-- //编辑 -->
  <el-dialog v-model="editVisivle" title="详情" :close-on-click-modal="false">
    <el-form :model="editForm" label-width="100px">
      <el-form-item label="姓名" prop="cmuCode">
        <el-input v-model="editForm.name" class="input-style" />
      </el-form-item>
      <el-form-item label="邮箱" prop="cmuCode">
        <el-input v-model="editForm.mail" class="input-style" />
      </el-form-item>
      <div class="button-style2">
        <el-button type="primary" @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editSummit">提交</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup>
import SearchHeader from "@/components/searchHeader";
import Table from "@/components/table";
import { onMounted, ref } from "vue";
import { applicantApi } from "@/api/dsjApi/serves";
import { ElMessage } from "element-plus";

const searchForm = ref({
  name: "",
});

const searchFormLeftList = [{ type: "input", label: "姓名", prop: "name" }];

const buttonList = ref([
  {
    label: "新增",
    clickFunc: () => {
      addVisivle.value = true;
    },
  },
  {
    label: "查询",
    clickFunc: () => {
      getDataList();
    },
  },
]);

//表单数据
const applicantData = ref([]);
const applicantDataDefaultData = ref({
  labelList: [
    { label: "id", prop: "id" },
    { label: "姓名", prop: "name" },
    { label: "邮箱", prop: "mail" },
  ],
  page: { pageNum: 1, pageSize: 10, total: 0 },
});
//新增
const addVisivle = ref(false);
const addForm = ref({});
const addCancel = () => {
  addVisivle.value = false;
};
const addSummit = () => {
  applicantApi()
    .addApplicant(addForm.value)
    .then((res) => {
      if (res.code == 200) {
        ElMessage({
          message: "新增申请人成功",
          type: "success",
        });
        addCancel();
        getDataList();
      }
    });
};

//编辑
const editVisivle = ref(false);
const editForm = ref({});
const editCancel = () => {
  editVisivle.value = false;
};
const editSummit = () => {
  applicantApi()
    .editApplicant(editForm.value)
    .then((res) => {
      if (res.code == 200) {
        ElMessage({
          message: "修改申请人信息成功",
          type: "success",
        });
        editCancel();
        getDataList();
      }
    });
};
const openEdit = (row) => {
  editVisivle.value = true;
  editForm.value = JSON.parse(JSON.stringify(row));
};

//删除
const proDel = (row) => {
  const data = { id: row.id };
  applicantApi()
    .delApplicant(data)
    .then((res) => {
      if (res.code == 200) {
        ElMessage({
          message: "删除申请人成功",
          type: "success",
        });
        getDataList();
      }
    });
};

const getDataList = () => {
  const data = {
    curr: applicantDataDefaultData.value.page.pageNum,
    name: searchForm.value.name,
    size: applicantDataDefaultData.value.page.pageSize,
  };
  applicantApi()
    .getApplicantList(data)
    .then((res) => {
      console.log("查询申请人接口", res);
      if (res.code == 200) {
        applicantData.value = res.data.list;
        applicantDataDefaultData.value.page.total = res.data.total;
      }
    });
};
onMounted(() => {
  getDataList();
});
</script>

<style lang="scss" scoped>
</style>
